<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>

    <!--
        第二种方式（内部样式表）
            -将样式编写到head的style标签内
                然后通过CSS的选择器来选中元素，并为其设置各种样式
                可以同时为多个标签设置样式，并且修改时只需要修改一处
            -内部样式更加方便对样式进行复用
            -问题：
            我们的内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用

    -->
    <!--
    <style>
        p{
            color: blueviolet;
            font-size: 60px;
        }
    </style>
    -->


    <!--
        第三种方式（外部样式表） 最佳方式
            -可以将CSS样式编写到一个外部的CSS文件中，
                然后通过link标签来引入外部的CSS文件
            -外部样式表需要通过link标签来进行引入，
                意味着只要想使用这些样式的网页都可以对其进行引用
                使样式可以在不同的页面之间复用
            -将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
                从而加快网页的加载速度，提高用户的体验

    -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!--
        网页分成三个部分：
            结构（HTML）
            表现（CSS）
            行为（JavaScript)
        CSS
            -层叠样式表
            -网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
            -而最终我们能看到的知识网页的最上边一层
            -总之一句话，CSS用来设置网页中元素的样式

    -->

    <!--
        使用CSS来修改元素的样式

        第一种方式（内联方式，行内样式）
            -在标签内部通过style属性来设置元素的样式
            -问题：
                使用内联样式，样式只能对一个标签生效，
                如果希望影响到多个元素，必须在每一个元素中都复制一遍
                并且样式发生变化时，我们必须一个一个的修改，非常的不方便
            -注意：开发时绝对不要使用内联样式

    -->

    <!--
    <p style="color: aqua; font-size: 60px;">床前明月光，疑是地上霜。</p>
    <p style="color: aqua; font-size: 60px;">举头望明月，低头思故乡。</p>
    -->

    
    <p>我采用了样式的效果</p>
    <p>你好呀，这个世界！</p>
    
</body>
</html>